import React from 'react'
import './CanOperate.css'
import { Modal,notification } from 'antd'
import { SmileOutlined } from '@ant-design/icons'
import {inject,observer} from 'mobx-react'
import {toJS} from 'mobx'
import axios from '../../../../../utils/http'
import * as api from '../../../../../utils/api'

//可执行操作 已付款
@inject('curOrder')
@observer
class AlreadyPay extends React.Component {
    constructor(){
        super()
        this.state={
            orderNumVal:'',
            selectVal:'中通快递',
        }
    }
    openNotification = (obj) => {
        notification.open({
          message: '提示信息',
          description:obj,
          icon: <SmileOutlined style={{ color: '#B867F4' }} />,
        });
    };
    changeSelectVal = (e)=>{
        this.setState({
            selectVal:e.target.value
        })
    }
    changeKuaiDiNum = (e)=>{
        this.setState({
            orderNumVal:e.target.value,
        })
    }
    immediateFaHuo = ()=>{
        // 跳转到批量发货页面
        this.props.history.push('/Home/dingDan/Batch')

        /* if(this.state.orderNumVal===''){
            let obj = '亲，你好像忘记填写快递单号了哦!\n如有需要，不要忘记修改快递公司哦!'
            this.openNotification(obj)
        }else{
            // 向后台发起请求修改订单综合状态、发货时间、发货单号、配送方式

            let obj = '亲，该订单已经成功发货了哦!'
            this.openNotification(obj)
            setTimeout(() => {
                window.location.reload()
            }, 1000);
        } */
    }
    genarateFaHuoDan = ()=>{
        if(this.state.orderNumVal===''){
            let obj = '亲，你好像忘记填写快递单号了哦!\n如有需要，不要忘记修改快递公司哦!'
            this.openNotification(obj)
        }else{
            /* 向后台发起请求修改订单综合状态、发货时间、发货单号、配送方式 */

            let obj = '亲，已经成功生成发货单了哦,即将进入发货单详情页面!'
            this.openNotification(obj)
            this.onOpenFaHuoDanDetailPage()
            // 跳转到发货单详情页面
            /* setTimeout(() => {
                this.props.history.push('')
            }, 1000); */
        }
    }
    openOperatePage(){
        /*跳转到售后详情页面*/
        this.props.onToBeiZhu()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    openRefundPage=()=>{
        /*跳转到退款页面*/
        this.props.onToRefund()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Refundman')
    }
    render(){
        return (
            <div className='AlreadyPay'>
                可执行操作 :
                {/* <select name="" id="" onChange={this.changeSelectVal}>
                    <option value="中通快递">中通快递</option>
                    <option value="申通快递">申通快递</option>
                    <option value="圆通快递">圆通快递</option>
                    <option value="韵达快递">韵达快递</option>
                    <option value="顺丰快递">顺丰快递</option>
                    <option value="菜鸟裹裹">菜鸟裹裹</option>
                </select>
                <input type="text" placeholder="请输入快递单号" value={this.state.orderNumVal} onChange={this.changeKuaiDiNum}/> */}
                <button className="copyBtn" onClick={this.immediateFaHuo}>一键发货</button>
                <button className="copyBtn" onClick={this.genarateFaHuoDan}>生成发货单</button>
                <button className="copyBtn" onClick={this.openOperatePage}>售后</button>
                <button className="copyBtn" onClick={this.openRefundPage}>退款</button>
            </div>
        );
    }
}

//可执行操作 待付款
@inject('curOrder')
@observer
class WaitingPay extends React.Component {
    state = { visible: false };
    showModal = () => {
      this.setState({
        visible: true,
      });
    }
    handleOk = () => {
        console.log(toJS(this.props.curOrder.curOrderDataArr))
        console.log(toJS(this.props.curOrder.curOrderDataOperateArr))
        let curOrderDataArr = toJS(this.props.curOrder.curOrderDataArr)
        let curOrderDataOperateArr = toJS(this.props.curOrder.curOrderDataOperateArr)

        console.log(curOrderDataOperateArr[0].payStatu)
        // 1：未支付、2：已支付、3：已退款
        let curPayState = curOrderDataOperateArr[0].payStatu
        if(curPayState === 2){
            curPayState = 1
        }else{
            curPayState = 2
        }

        let _this = this
        let operateMsg = this.props.operateMsg
        // 向后台发起请求修改付款状态
        axios({
            url:api.GET_UPDATEPAYSTATUSAllready,
            method:'POST',
            data:{
                orderId:_this.props.curOrder.curOrderDataId,//订单id
                ordoper:{
                    modeDis:curOrderDataArr[0].orderDm,//配送方式
                    opera:"sunny",//操作者
                    payStatu:curPayState,  //支付状态
                    delivStatu:curOrderDataOperateArr[0].delivStatu, //发货状态
                    ordoperDesc:operateMsg,//操作备注
                    delivNum:curOrderDataOperateArr[0].delivNum,//快递单号
                }
            }
        }).then(data=>{
            console.log(data)
            _this.setState({
                visible: false,
            })
            window.location.reload()
        })
    }
  
    handleCancel = () => {
      this.setState({
        visible: false,
      });
    }
    openOperatePage=()=>{
        /*跳转到售后详情页面*/
        this.props.onToBeiZhu()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    openRefundPage=()=>{
        /*跳转到退款页面*/
        this.props.onToRefund()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Refundman')
    }
    render(){
        return (
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.showModal}>付款</button>
                <button className="copyBtn" onClick={this.openOperatePage}>售后</button>
                <button className="copyBtn" onClick={this.openRefundPage}>退款</button>
                <Modal
                        title="提示信息"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                    <p>是否将该订单设为已付款???</p>
                </Modal>
            </div>
        );
    }
}

//可执行操作 待发货
@inject('curOrder')
@observer
class WaitingFaHuo extends React.Component {
    constructor(){
        super()
        this.state={
            orderNumVal:'',
            selectVal:'中通快递',
            visible: false,
            faHuoState:''
        }
    }
    openNotification = (obj) => {
        notification.open({
          message: '提示信息',
          description:obj,
          icon: <SmileOutlined style={{ color: '#B867F4' }} />,
        });
    }
    changeSelectVal = (e)=>{
        this.setState({
            selectVal:e.target.value
        })
    }
    changeKuaiDiNum = (e)=>{
        this.setState({
            orderNumVal:e.target.value,
        })
    }
    immediateFaHuo = ()=>{
        if(this.state.orderNumVal===''){
            this.openNotification('亲,快递公司和快递单号不能为空哦!')
        }else{
            this.openNotification('亲,已经成功发货了哦!')

            let val = '待收货'
            this.props.onChangeCurOrderStateZongHe(val)

            /* 向后台发起请求修改订单综合状态、发货时间、发货单号、配送方式 */

            /* setTimeout(() => {
                window.location.reload()
            }, 1000); */
        }
    }
    genarateFaHuoDan = ()=>{
        if(this.state.orderNumVal===''){
            let obj = '亲，你好像忘记填写快递单号了哦!\n如有需要，不要忘记修改快递公司哦!'
            this.openNotification(obj)
        }else{
            /* 向后台发起请求修改订单综合状态、发货时间、发货单号、配送方式 */
            
            let obj = '亲，已经成功生成发货单了哦,即将进入发货单详情页面!'
            this.openNotification(obj)
            // 跳转到发货单详情页面
            setTimeout(() => {
                this.props.onOpenFaHuoDanDetailPage()
            }, 1000);
        }
    }
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = () => {
        let _this = this
        // 后台请求修改当前支付状态为未支付
        // console.log(toJS(this.props.curOrder.curOrderDataArr))
        // console.log(toJS(this.props.curOrder.curOrderDataOperateArr))
        let curOrderDataArr = toJS(this.props.curOrder.curOrderDataArr)
        let curOrderDataOperateArr = toJS(this.props.curOrder.curOrderDataOperateArr)
        // console.log(curOrderDataOperateArr)
        // console.log(curOrderDataArr)
        // 1：未支付、2：已支付、3：已退款
        let curPayState = curOrderDataOperateArr[0].payStatu
        if(curPayState === 2){
            curPayState = 1
        }else{
            curPayState = 2
        }

        let operateMsg = this.props.operateMsg
        // 向后台发起请求修改付款状态
        axios({
            url:api.GET_UPDATEPAYSTATUSNOPAY,
            method:'POST',
            data:{
                orderId:_this.props.curOrder.curOrderDataId,//订单id
                ordoper:{
                    modeDis:curOrderDataArr[0].orderDm,//配送方式
                    opera:"sunny",//操作者
                    payStatu:curPayState,  //支付状态
                    delivStatu:curOrderDataOperateArr[0].delivStatu, //发货状态
                    ordoperDesc:operateMsg,//操作备注
                    delivNum:curOrderDataOperateArr[0].delivNum,//快递单号
                }
            }
        }).then(data=>{
            // console.log(data)
            _this.setState({
                visible: false,
            })

            window.location.reload()
        })
    }
  
    handleCancel = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };
    openOperatePage=()=>{
        /*跳转到售后详情页面*/
        this.props.onToBeiZhu()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    openRefundPage=()=>{
        /*跳转到退款页面*/
        this.props.onToRefund()

        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Refundman')
    }
    render(){
        return (
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.showModal}>设为未付款</button>
                <select name="" id="" onChange={this.changeSelectVal}>
                    <option value="1">中通快递</option>
                    <option value="2">申通快递</option>
                    <option value="3">圆通快递</option>
                    <option value="4">韵达快递</option>
                    <option value="5">顺丰快递</option>
                    <option value="6">菜鸟裹裹</option>
                </select>
                <input type="text" placeholder="请输入快递单号" value={this.state.orderNumVal} onChange={this.changeKuaiDiNum}/>
                <button className="copyBtn" onClick={this.immediateFaHuo}>一键发货</button>
                <button className="copyBtn" onClick={this.genarateFaHuoDan}>生成发货单</button>
                <button className="copyBtn" onClick={this.openOperatePage}>售后</button>
                <button className="copyBtn" onClick={this.openRefundPage}>退款</button>
                <Modal
                        title="提示信息"
                        visible={this.state.visible}
                        onOk={this.handleOk}
                        onCancel={this.handleCancel}
                    >
                    <p>是否将该订单设为待付款???</p>
                </Modal>
            </div>
        );
    }
}

//可执行操作 待收货
@inject('curOrder')
@observer
class WaitingShouHuo extends React.Component {
    constructor(){
        super()
        this.state={
            faHuoState:'待收货'
        }
    }
    changFaHuoStateToNo = ()=>{
    // 向后端发起请求将订单状态改为未发货
        let curOrderDataArr = toJS(this.props.curOrder.curOrderDataArr)
        let curOrderDataOperateArr = toJS(this.props.curOrder.curOrderDataOperateArr)
        // console.log(curOrderDataOperateArr[0].payStatu)
        // 1：未支付、2：已支付、3：已退款
        // 发货状态（1：已经发货 0：未发货 2：发货中）
        let curDeliState = curOrderDataOperateArr[0].delivStatu
        curDeliState = 0
        let _this = this
        let operateMsg = this.props.operateMsg
        // 向后台发起请求修改付款状态
        axios({
            url:api.POST_UPDATEDELIVSTATULNO,
            method:'POST',
            data:{
                orderId:_this.props.curOrder.curOrderDataId,//订单id
                ordoper:{
                    modeDis:curOrderDataArr[0].orderDm,//配送方式
                    opera:"sunny",//操作者
                    payStatu:curOrderDataOperateArr[0].payStatu,  //支付状态
                    delivStatu:curDeliState, //发货状态
                    ordoperDesc:operateMsg,//操作备注
                    delivNum:curOrderDataOperateArr[0].delivNum,//快递单号
                }
            }
        }).then(data=>{
            console.log(data)
            _this.setState({
                visible: false,
            })
            window.location.reload()
        })
    }
    changFaHuoStateToYes = ()=>{
        // 向后端发起请求将订单状态改为已完成
        let curOrderDataArr = toJS(this.props.curOrder.curOrderDataArr)
        let curOrderDataOperateArr = toJS(this.props.curOrder.curOrderDataOperateArr)
        console.log(curOrderDataOperateArr[0].payStatu)
        // 1：未支付、2：已支付、3：已退款
        // 发货状态（1：已经发货 0：未发货 2：发货中）
        // let curDeliState = curOrderDataOperateArr[0].delivStatu
        // let curDeliState = 1
        let _this = this
        let operateMsg = this.props.operateMsg
        // 向后台发起请求修改付款状态
        axios({
            url:api.POST_UPDATEDELIVSTATULAlready,
            method:'POST',
            data:{
                orderId:_this.props.curOrder.curOrderDataId,//订单id
                orderStatu:6,   //订单大状态  已完成 
                ordoper:{
                    modeDis:curOrderDataArr[0].orderDm,//配送方式
                    opera:"sunny",//操作者
                    payStatu:curOrderDataOperateArr[0].payStatu,  //支付状态
                    delivStatu:1, //发货状态
                    ordoperDesc:operateMsg,//操作备注
                    delivNum:curOrderDataOperateArr[0].delivNum,//快递单号
                }
            }
        }).then(data=>{
            console.log(data)
            _this.setState({
                visible: false,
            })
            window.location.reload()
        })


        new Promise((resolve,reject)=>{
            this.setState({
                faHuoState:'已完成'
            })
            resolve()
        }).then(()=>{
            let val = this.state.faHuoState
            this.props.onChangeCurOrderStateZongHe(val)
        })
    }
    openOperatePage=()=>{
        /*跳转到售后详情页面*/
        this.props.onToBeiZhu()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    render(){
        return (
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.changFaHuoStateToNo}>未发货</button>
                <button className="copyBtn" onClick={this.changFaHuoStateToYes}>已收货</button>
                <button className="copyBtn" onClick={this.openOperatePage}>售后</button>
            </div>
        );
    }
}

//可执行操作 待核销
@inject('curOrder')
@observer
class WaitingHeXiao extends React.Component {
    openOperatePage=()=>{
        /*跳转到售后详情页面*/
        this.props.onToBeiZhu()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    openRefundPage=()=>{
        /*跳转到退款页面*/
        this.props.onToRefund()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Refundman')
    }
    render(){
        return (
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.openOperatePage}>售后</button>
                <button className="copyBtn" onClick={this.openRefundPage}>退款</button>
            </div>
        );
    }
}

//可执行操作 待评价、已完成、已取消、已退款、无效显示
@inject('curOrder')
@observer
class OtherOperate extends React.Component {
    openOperatePage=()=>{
        /*跳转到售后详情页面*/
        this.props.onToBeiZhu()
        // this.props.history.push('/Home/dingDan/Orderlist/Orderdetail/Operate')
    }
    render(){
        return (
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.openOperatePage}>售后</button>
            </div>
        );
    }
}

// 发货单正常状态
@inject('curOrder')
@observer
class Fahuozhengchang extends React.Component{
    openNotification = (obj) => {
        notification.open({
          message: '提示信息',
          description:obj,
          icon: <SmileOutlined style={{ color: '#B867F4' }}/>,
        });
    }
    faHuo = ()=>{
        let _this = this
        let curFaHuoOperateArr = toJS(this.props.curOrder.curFaHuoOperateData)
        let myDataArr = toJS(this.props.curOrder.curFaHuoData)

        console.log(_this.props.operateMessage)

        let curState = myDataArr[0].invoiceStatus
        if(curState === 0){
            curState = 2
        }else{
            curState = 0
        }

        if(this.props.faHuoStateMsg){
            // this.props.onChangefaHuoState('已发货',this.props.faHuoStateMsg)
            // 向后台发起请求修改当前发货单的发货单状态为已发货
            // 刷新发货单详情页面
           axios({
                url:api.GET_UPDATEDELIVERYOPERATESTATE,
                method:'POST',
                data:{
                    invoiceId:_this.props.curOrder.curFaHuoDanId,//发货单ID
                    invoiceIn:_this.props.faHuoStateMsg,//发货单号
                    orderId:myDataArr[0].orderId,
                    im:{
                        imOperator:'fcwedsf',//操作者
                        imRemarks:_this.props.operateMessage,
                        imOrderstatus:myDataArr[0].invoiceStatus,
                        imPaymentstatus:curFaHuoOperateArr[0].imPaymentstatus,
                        imShipmentsstatus:curState
                    }
                }
            }).then(data=>{
                this.openNotification('亲,已经发货成功!')
                window.location.reload()
            })
        }else{
            this.openNotification('亲,请完善基本信息中的发货单号哦!')
        }
    }
    render(){

        return(
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.faHuo}>发货</button>
            </div>
        )
    }
}

// 发货单已发货状态
@inject('curOrder')
@observer
class Alreadyfahuo extends React.Component{
    openNotification = (obj) => {
        notification.open({
          message: '提示信息',
          description:obj,
          icon: <SmileOutlined style={{ color: '#B867F4' }} />,
        });
    }
    quXiaoFaHuo = ()=>{
        let _this = this
        let curFaHuoOperateArr = toJS(this.props.curOrder.curFaHuoOperateData)
        let myDataArr = toJS(this.props.curOrder.curFaHuoData)
        let curState = myDataArr[0].invoiceStatus
        if(curState === 0){
            curState = 2
        }else{
            curState = 0
        }
        this.openNotification('亲,已经取消发货了哦!')

        // 向后台发起请求修改当前发货单的发货单状态为未发货
        // 刷新发货单详情页面
        axios({
            url:api.GET_UPDATEDELIVERYOPERATECANCELSTATE,
            method:'POST',
            data:{
                invoiceId:_this.props.curOrder.curFaHuoDanId,//发货单ID
                im:{
                    imOperator:'fcwedsf',//操作者
                    imRemarks:_this.props.operateMessage,
                    imOrderstatus:myDataArr[0].invoiceStatus,
                    imPaymentstatus:curFaHuoOperateArr[0].imPaymentstatus,
                    imShipmentsstatus:curState
                }
            }
        }).then(data=>{
            window.location.reload()
        })
    }
    render(){
        return(
            <div className='AlreadyPay'>
                可执行操作 :
                <button className="copyBtn" onClick={this.quXiaoFaHuo}>取消发货</button>
            </div>
        )
    }
}

export {
    AlreadyPay,
    WaitingPay,
    WaitingFaHuo,
    WaitingShouHuo,
    WaitingHeXiao,
    OtherOperate,
    Fahuozhengchang,
    Alreadyfahuo,
}
